<template>
  <div class="table1">
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="addFormVisible = true">添加</a-button>
      <a-button type="info" @click="download">导出</a-button>
    </div>
    <z-table ref="table" rowKey="memberId" :showAlert="false" :showSelection="true" :loading="loading"
      :columns="columns" :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange">

      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding:0;">查看</a-button>

        <!-- <a-button @click="onPeopleDetail(record)" type="link" style="padding:0;margin-left: 10px;">参与人员</a-button> -->
      </template>
    </z-table>

    <a-modal title="添加" :visible="addFormVisible" @ok="onAddSubmit" @cancel="onAddFormCancel">
      <a-form-model ref="addForm" :model="addForm" :label-col="{span: 5}" :wrapper-col="{span: 18}">
        <a-form-model-item label="组员名称" prop="memberId"
          :rules="{required: true, message: '请选择组员', trigger: ['change']}">
          <a-select v-model="addForm.memberId">
            <a-select-option :value="item.id" v-for="item in memberList" :key="id">{{item.memberName}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="活动名称">
          <a-input v-model="detail.activityName" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="小组/活动编号">
          <a-input v-model="detail.activityCode" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="负责社工">
          <a-input v-model="detail.createByName" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="活动时间">
          <a-input v-model="detail.activityBeginDate" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="小组约定">
          <a-textarea v-model="desc" :auto-size="{ minRows: 20, maxRows: 10 }" disabled></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="组员签名" prop="memberSignaturePng"
          :rules="{required: true, message: '请进行签名', trigger: ['change']}">
          <!-- <a-textarea v-model="addForm.memberSignaturePng" :auto-size="{ minRows: 10, maxRows: 10 }"></a-textarea> -->
          <sign ref="sign"></sign>
          
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import {
    agreementList,
    memberList,
    add
  } from '@/api/sjsk/activity/group/detail/mature/table1'
  import sign from '@/views/sjsk/personnelMGMT/activity/components/sign'
  import downloadXlsl from '../../downloadXlsx.js'
  export default {
    components: {
      sign
    },
    props: {
      detail: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        desc: '为了我们在小组中的共同目标，我们达成以下约定：\n我们是有勇气的探索者；\n在团体中拿出勇气；\n开放自己；\n主动、 积极地分享自己的经验与想法；\n我们是积极的行动者；\n全力以赴去执行并实现小组目标；\n我们是好的倾听者与回应者；\n尊重小伙伴；\n认真聆听；\n真诚回馈；\n我们是热诚的鼓励者；\n正向鼓励积极肯定；\n我们是负责的参与者；\n不迟到；\n不请假；\n我们是忠诚的保密者；\n不把小组中发生的事以及组员的分享与小组外的人员讨论。 ',
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10
        },
        pageData: {},
        form: {},
        columns: [{
            title: '组员名称',
            dataIndex: 'memberName',
            width: 80,
            align: 'center'
          },
          {
            title: '提交情况',
            dataIndex: 'submitStatus',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value = {  text == 1 ? '已提交' : '未提交' } length = {  14 } />
            }
          },
          {
            title: '提交日期',
            dataIndex: 'createTime',
            width: 80,
            align: 'left',
            customRender: text => {
              return <j-ellipsis value = { text } length = { 14 } />
            }
          },
          {
            title: '操作',
            width: 120,
            align: 'center',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        addForm: {
          activityId: '',
          memberId: '',
          memberSignaturePng: '',
        },
        addFormVisible: false,
        memberList: []
      }
    },
    created() {
      this.onQuery()
      this.getMemberList()
    },
    methods: {
      download() {
        downloadXlsl(this.$route.query.id, 4)
      },
      getMemberList() {
        memberList({
          activityId: this.$route.query.id
        }).then(res => {
          if (res.success) {
            this.memberList = res.result.records
          }
        })
      },
      onAddSubmit() {
        this.addForm.activityId = this.detail.id
        this.$refs.sign.save().then(res => {
          this.addForm.memberSignaturePng = res
          this.$refs.addForm.validate().then(res => {
            add(this.addForm).then(res => {
              if(res.success) {
                this.$message.success('添加成功')
                this.onAddFormCancel()
                this.onQuery()
                this.$refs.sign.handleReset()
              } else {
                this.$message.error(res.message)
              }
            })
          })
        })
        

      },
      onAddFormCancel() {
        this.addFormVisible = false
        this.addForm = {
          activityId: '',
          memberId: '',
          memberSignaturePng: '',
        }
      },
      onSignSuccess(res) {
        console.log(res)
        this.addForm.memberSignaturePng = res
      },

      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = {
          currentPage: 'pageNo'
        }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.queryParam, this.pageFilter)
        form.activityId = this.$route.query.id
        this.loading = true
        agreementList(form).then((res) => {
            if (res.success) {
              this.pageData = res.result ? res.result : {}
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
    }
  }
</script>

<style lang="less" scoped>
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;

    .btn-wrap {
      margin-bottom: 20px;
    }
  }
</style>
